import React, { Component } from 'react';
import "../styles/search/SearchPage.scss";
import {withRouter} from 'react-router-dom';
import * as service from '../api/index';

import pic from '../assets/search-cdcdcd.png';

class SearchPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            currentIndex: 0,//用来保存导航按钮的下标
        }
    }
    componentDidMount() {
        console.log('componentDidMount');
        //一般在这个方法中 发送ajax请求, 创建定时器, 监听事件
        service.good_hotsearch().then((res) => {
            console.log(res.data);
            this.setState({ hotsearch: res.data.list });
            // eslint-disable-next-line react/no-direct-mutation-state
            this.state.list=res.data.list
        })
    }
    back(){
        //返回上一个路由
        this.props.history.go(-1);
    }
    render() {
        return (
            <div className='SearchPage'>
                {/* 搜索页 */}
                <div className='searchPage_Box'>
                    <div className='searchPage_search'>
                        <img src={pic} alt="" />
                        <input type="text" placeholder='搜索店铺内商品' />
                    </div>
                    <div className='searchPage_cancel' onClick={()=>{ this.back() }}>取消</div>
                </div>
                <div className='searchPage_hot'>
                    <div className='searchPage_title'>热门搜索</div>
                    <div className='searchPage_hotSearch'>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <div className='searchPage_item' key={index}>{item}</div>
                                )
                            })
                        }
                    </div>

                </div>
            </div>
        );
    }
}

export default withRouter(SearchPage);